<template>
  <el-container class="main_con">
    <ufrom @submit="saveData" ref="ufrom">
      <el-form size="medium" label-width="100px" ref="itemForm" :model="obj.configuration" :rules="itemRules">
        <div class="setting_body_item">
          <div class="header">联系我们</div>
          <div class="conetnt edit_con">
            <div class="edit_content">
              <el-form-item label="高德API" prop="web_jsapi">
                <el-input v-model="obj.configuration.web_jsapi" style="width:360px;" placeholder="请输入高德web端(jsapi)KEY"></el-input>
              </el-form-item>

              <el-form-item label="联系人" prop="contacts"><el-input v-model="obj.configuration.contacts" style="width:360px;" placeholder="请输入联系人"></el-input></el-form-item>

              <el-form-item label="联系电话1" prop="mobile1">
                <el-input v-model="obj.configuration.mobile1" style="width:360px;" placeholder="请输入联系电话"></el-input>
              </el-form-item>

              <el-form-item label="联系电话2"><el-input v-model="obj.configuration.mobile2" style="width:360px;" placeholder="请输入备用联系电话"></el-input></el-form-item>
            </div>
          </div>
        </div>
      </el-form>
    </ufrom>
  </el-container>
</template>

<script>
import {addSiteConfig, editSiteConfig, getSiteConfig} from '@/api/mall/setting';
export default {
  data() {
    return {
      isLoading: false,
      obj: {
        type: 'mallContact',
        status: 1,
        configuration: {
          web_jsapi: '',
          contacts: '',
          mobile1: '',
          mobile2: ''
        }
      },
      itemRules: {
        web_jsapi: [
          {
            required: true,
            message: '高德地图API必须填写'
          }
        ],
        contacts: [
          {
            required: true,
            message: '联系人必须填写'
          }
        ],
        mobile1: [
          {
            required: true,
            message: '联系电话必须填写'
          }
        ]
      }
    };
  },
  components: {},
  mounted() {
    this.getConfig('mallContact');
  },
  methods: {
    //获取站点配置数据
    getConfig(type) {
      getSiteConfig(type)
        .then(res => {
          if (res.msg) {
            this.obj = res.msg;
          }
        })
        .catch(e => {});
    },
    //保存数据
    saveData() {
      this.$refs.itemForm.validate(valid => {
        if (valid) {
          if (this.obj.update_time) {
            //更新
            editSiteConfig(this.obj)
              .then(res => {
                this.$refs.ufrom.init();
                this.getConfig('mallContact');
              })
              .catch(e => {
                this.$refs.ufrom.init();
              });
          } else {
            //新增
            addSiteConfig(this.obj)
              .then(res => {
                this.$refs.ufrom.init();
                this.getConfig('mallContact');
              })
              .catch(e => {
                this.$refs.ufrom.init();
              });
          }
        } else {
          this.$refs.ufrom.init();
          //校验没通过
          return false;
        }
      });
    }
  }
};
</script>
